<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模型历史 - 航班乘客付费选座预测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">模型历史记录</h1>
            <p class="text-gray-600 mt-2">查看模型训练历史和性能变化</p>
        </header>

        <nav class="bg-white rounded-lg shadow-md p-4 mb-8">
            <ul class="flex flex-wrap gap-4 justify-center">
                <li><a href="/" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-home mr-1"></i>首页</a></li>
                <li><a href="/visualizations" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-bar-chart mr-1"></i>数据分析</a></li>
                <li><a href="/upload" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-upload mr-1"></i>数据上传</a></li>
                <li><a href="/model-history" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-history mr-1"></i>模型历史</a></li>
            </ul>
        </nav>

        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-gray-700">
                <i class="fa fa-list-alt mr-2"></i>模型训练记录
            </h2>

            {% if history %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">训练时间</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型类型</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">准确率</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ROC-AUC</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">训练样本数</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for record in history %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {{ record.timestamp | replace("_", " ") }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ record.model_name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ "%.4f"|format(record.accuracy) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ "%.4f"|format(record.roc_auc) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ record.train_samples }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-8 text-gray-500">
                <i class="fa fa-folder-open-o text-4xl mb-2"></i>
                <p>暂无模型训练记录</p>
            </div>
            {% endif %}
        </div>

        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>航班乘客付费选座预测系统 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>